﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="Overview">
    <h2><DemoNavLink Link="TagBox#Overview" />TagBox - Overview</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2">TagBox</a> is an editor that allows users to select multiple items (tags) from a predefined drop-down list. Users can also type in the edit box to filter list items that contain the search string. To remove a tag, users can click its remove button or press Backspace.
    </p>
    <p>
        The main TagBox API members are listed below.
    </p>
    <p>
        <ul>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.Data">Data</a> - Specifies the data source that populates the editor’s list items.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.TextFieldName">TextFieldName</a> - Specifies the data source’s field that supplies text for items.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.Tags">Tags</a> - Specifies the editor’s tags.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.TagsChanged">TagsChanged</a> - Fires when the tag collection is changed.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.Values">Values</a> - Specifies the drop-down list’s selected values.</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.ValuesChanged">ValuesChanged</a> - Fires when the selected value collection is changed.</li>
        </ul>
    </p>
    <p>
        The TagBox component supports different size modes. To specify the component's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxResizableEditorBase-2.SizeMode">SizeMode</a> property. To apply different size modes, use the drop-down list in the demo card's header.
    </p>
    <p>This demo illustrates how to bind the TagBox to a list of complex business objects.</p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Select items from the drop-down list"/>
    </div>
    <div class="card-body mw-480">
        <DxTagBox Data="@Staff.DataSource"
                  TextFieldName="@nameof(Person.Text)"
                  @bind-Values="@SelectedStaff"
                  SizeMode="SizeMode"></DxTagBox>
    </div>
</div>

<CodeSnippet_Editor_TagBox/>

@code {
    IEnumerable<Person> SelectedStaff { get; set; } = new List<Person>() { Staff.DataSource[0] };
}
